<script setup>
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
	} from "@dcloudio/uni-app";
	import {
		computed,
		ref,
		watch
	} from "vue";
	import nuni from '../../static/utils/request.js'
	import {
		useCartStore
	} from '@/stores/cart.js'
	const cartStore = useCartStore()
	// 存储获得的商品id，以及预定义其它渲染所需数据
	let goodsId = ''
	const goodsInfo = ref({})
	onLoad(options => {
		goodsId = options.goods_id
		getGoodInfo()
	})
	const getGoodInfo = async () => {
		const {
			data: res
		} = await nuni.request({
			url: '/api/public/v1/goods/detail',
			data: {
				goods_id: goodsId
			}
		})
		if (res.meta.status != 200) return nuni.$showMsg()
		// 处理图片间隙问题：字符串正则替换
		res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,
			'<img style="display: block;" ').replace(/webp/g, 'jpg')
		goodsInfo.value = res.message
	}
	// 处理大图预览
	const picUrlsArr = computed(() => goodsInfo.value.pics.map(ele => ele.pics_big))
	const viewBigPic = idx => {
		uni.previewImage({
			current: idx,
			urls: picUrlsArr.value
		})
	}
	// 底部导航栏
	const options = ref([{
		icon: 'shop',
		text: '店铺',
		infoBackgroundColor: '#007aff',
		infoColor: "#f5f5f5"
	}, {
		icon: 'cart',
		text: '购物车',
		info: 0
	}])
	const buttonGroup = ref([{
			text: '加入购物车',
			backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
			color: '#fff'
		}
	])
	//点击左侧业务
	const clickNavLeft = e => {
		if (e.content.text === '购物车')
			uni.switchTab({
				url: '/pages/cart/cart'
			})
	}
	// 点击右侧业务
	const clickNavRight = e => {
		if (e.content.text === '加入购物车') {
			const {
				goods_id,
				goods_name,
				goods_small_logo,
				goods_price
			} = goodsInfo.value
			const nGoods = {
				goods_id,
				goods_name,
				goods_small_logo,
				goods_price,
				goods_count: 1,
				goods_state: true
			}
			cartStore.addToCart(nGoods)
		}
	}
	// // 监听购物车数量修改事件，反映到徽标上(使用计算属性技巧来监听仓库的数据)
	const totalCnt = computed(() => useCartStore().totalCnt)
	watch(totalCnt, nVal => {
		options.value.find(ele => ele.text === '购物车').info = nVal
	}, {
		// // // 进入页面初始化
		immediate: true
	})
</script>
<template>
	<!-- 轮播图 -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
		<swiper-item v-for="(e1, i1) in goodsInfo.pics" :key="i1">
			<image :src="e1.pics_big" @click="viewBigPic(i1)"></image>
		</swiper-item>
	</swiper>
	<!-- 商品信息 -->
	<view class="goods-info-box">
		<view class="goods-price">
			￥{{goodsInfo.goods_price}}
		</view>
		<view class="goods-info-main">
			<view class="goods-name">
				{{goodsInfo.goods_name}}
			</view>
			<!-- 收藏图标 -->
			<view class="favi">
				<uni-icons type="star" size="20" color="gray"></uni-icons>
				<text>收藏</text>
			</view>
		</view>
		<!-- 运费 -->
		<view class="delivery-fee">
			快递：免运费
		</view>
	</view>
	<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
	<view style="height: 50px;"></view>
	<view class="bottom-nav">
		<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="clickNavLeft"
			@buttonClick="clickNavRight" />
	</view>
</template>


<style lang="scss">
	swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-info-box {
		padding: 8px;
		background-color: #fff;

		.goods-price {
			color: #C00000;
			font-size: 18px;
			margin: 10px 0;
		}

		.goods-info-main {
			display: flex;
			justify-content: space-between;

			.goods-name {
				font-size: 14px;
				margin-right: 6px;
			}

			.favi {
				width: 82px;
				font-size: 13px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-left: 1px solid #efefef;
				color: gray;
			}
		}

		.delivery-fee {
			font-size: 11px;
			color: gray;
			margin-top: 10px;
		}
	}

	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>